<script lang="ts" setup>
import event_details from './event_details.vue';
import { useImgEventStore } from '@/store/modules/dcp/image_management/imgEvent';

const isdetail = ref<boolean>(false);
const event = ref<string>('');
function getFileDetail(item: string) {
  event.value = item;
  isdetail.value = !isdetail.value;
}
function fileDetail() {
  isdetail.value = !isdetail.value;
}
// 文件列表
const fileData = ref<any[]>([]);
const imgEventStore = useImgEventStore();
onMounted(async () => {
  await imgEventStore.getEventList();
  fileData.value = imgEventStore.eventList;
});
</script>

<template>
  <div>
    <div v-if="!isdetail" class="e-content">
      <div v-for="(item, index) in fileData" :key="index" class="file" @click="getFileDetail(item.folderName)">
        <FolderOpenOutlined style="font-size: 5vw;color: #ffca28;" />
        <div>{{ item.folderName }}</div>
      </div>
    </div>
    <div v-if="isdetail" class="e-content">
      <event_details :file-detail="fileDetail" :event="event" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  width: 100%;
  height: 3vw;
  margin-bottom: 0.6vw;

  .pjTitle {
    padding-left: 1vw;
    background: url("@/assets/images/title-left-bg.svg") no-repeat;
  }

  .right {
    display: flex;
    align-items: center;
  }
}

.e-content {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  overflow: auto;

  .file {
    flex: 0 0 auto;
    width: calc(15% - 1vw);
    height: 7vw;
    margin-bottom: 2.667vw;
    text-align: center;
    cursor: pointer;
  }

  .file:hover {
    background-color: #d8eaf9;
  }
}
</style>
